<template>
  <div>
    <h1>{{$route.meta.title}}&emsp;|&emsp;{{$route.query.activity_name}} </h1>
    <div id="test">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="总文章热度统计" name="all">
                <el-table :data="allData" border style="width: 100%" v-loading="!isLoadingAll">
                    <el-table-column type="index" width="50" align="center"  label="排名"></el-table-column>
                    <el-table-column prop="author" label="作者"></el-table-column>
                    <el-table-column prop="hot" label="总热度"></el-table-column>
                    <el-table-column prop="quantity" label="篇数"></el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="单文章热度统计" name="single">
                <el-table :data="singleData" border style="width: 100%" v-loading="!isLoadingSingle">
                    <el-table-column type="index" width="50" align="center"  label="排名"></el-table-column>
                    <el-table-column prop="title" label="标题" width="500"></el-table-column>
                    <el-table-column prop="author" label="作者"></el-table-column>
                    <el-table-column prop="hot" label="热度"></el-table-column>
                    <el-table-column prop="date" label="发布时间"></el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
  </div>
</template>

<style lang='less' scoped>

/deep/ .el-tabs__nav-wrap::after{
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background-color: #ffffff;
        z-index: 1;
    }
</style>

<script>
import { getSingleHot, getAllHot } from "@/api/admin/activity";

export default {
  data() {
    return {
      params: {
        post_link: this.$route.query.post_link,
        start_date: this.$route.query.start_date,
        end_date: this.$route.query.end_date
      },

      singleData: [],   //单文章热度统计数据
      allData:[],   //单作者文章总热度统计数据
      isLoadingSingle:false,    //是否已加载
      isLoadingAll:false,    //是否已加载
      activeName:'all',
    };
  },
  methods: {
    getSingleHot() {
        if(!this.isLoadingSingle){
            getSingleHot(this.params).then(res => {
              this.singleData = res.data;
              this.isLoadingSingle = true;
            });
        }
    },
    getAllHot(){
        if(!this.isLoadingAll){
            getAllHot(this.params).then(res => {
              this.allData = res.data;
              this.isLoadingAll = true;
            });
        }
    },
    handleClick(tab,event){
        if(this.activeName == 'all'){
            this.getAllHot()
        }

        if(this.activeName == 'single'){
            this.getSingleHot()
        }
    }
  },
  created() {
    this.getAllHot();
  }
};
</script>